<template>
  <div class="audition187">
    <h3><strong>为啥要使用图片懒加载？</strong></h3>
    <p>1. 提升页面加载速度，改善用户体验</p>
    <p>2. 减少性能浪费。</p>
    <h3><strong>实现懒加载：</strong></h3>
    <p>方法一：</p>
    <p>根据图片的距离来判断图片是否滚动到了可视区，如果是，就显示出来</p>
    <p>先给图片src属性放一个加载中的图片，然后设置一个data-src属性作为真实的图片地址</p>
    <p>如果图片进入可视区，就把真实地址交给src</p>
    <v-md-preview :text="text1" />
    <p>方法二：</p>
    <p>利用浏览器提供的<span class="color">Intersection Observer</span>观察器接口。</p>
    <p>它是一个构造函数，接收一个回调函数cb作为参数</p>
    <p>当被观察者出现在可视区或者消失时，都会调用cb</p>
    <p>cb有一个参数<span class="color">entries</span>，它是一个数组，存放了所有被观察者的行为，</p>
    <p>其中，行为中有一个布尔值字段<span class="color">isIntersecting</span>用于表示被观察者在可视区显示或消失</p>
    <p>显示为true,消失为false</p>
    <p>我们就用它来观察图片，如果图片结构显示在可视区，就把图片加载出来</p>
    <p>如果图片已经加载了，就取消观察</p>
    <v-md-preview :text="text2" />
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition187',
  data() {
    return {
      text1: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          .box {
            width: 300px;
            margin: auto;
          }
          .img {
            width: 100%;
            margin-top: 10px;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <!--多个src都用同一个图片，该图片只会请求一次，所以不会影响性能-->
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
        </div>
        <script>
          window.onload = function () {
            var imgs = document.querySelectorAll('.img')
            function lazyLoadImg() {
              imgs.forEach(item => {
                // 高度判断第一种写法
                // if (item.offsetTop <= window.innerHeight + window.scrollY) {
                // 	item.setAttribute('src', item.dataset.src)
                // }
                // 高度判断第二种写法
                if(item.getBoundingClientRect().top <script window.innerHeight) {
                  item.setAttribute('src', item.dataset.src)
                }
              })
            }
            lazyLoadImg() // 先把可视区内的图片加载出来
            // 滚动懒加载
            window.addEventListener('scroll', function () {
              lazyLoadImg()
            })
          }
        \<\/script>
      </body>
      </html>
      \n${suffix}`,
      text2: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          .box {
            width: 300px;
            margin: auto;
          }
          .img {
            width: 100%;
            margin-top: 10px;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <!--多个src都用同一个图片，该图片只会请求一次，所以不会影响性能-->
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
          <img data-src="./dilireba.jpg" src="./imgloading.gif" alt="" class="img">
        </div>
        <script>
          window.onload = function () {
            var imgs = document.querySelectorAll('.img')
            function cb(entries) {
              entries.forEach((item, index) => {
                console.log(item)
                // 是否在可视区
                if(item.isIntersecting) {
                  item.target.setAttribute('src', item.target.dataset.src)
                  // 图片加载出来后，就停止观察
                  observer.unobserve(item.target)
                }
              })
            }
            var observer = new IntersectionObserver(cb)
            imgs.forEach(item => {
              // 观察每张图片
              observer.observe(item)
            })
          }
        \<\/script>
      </body>
      </html>
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>